---
type: tutorial
title: Crea la tua prima pagina Astro
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Aggiungi nuove pagine al tuo sito con link di navigazione tra di esse
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ora che sai che i file `.astro` sono responsabili delle pagine sul tuo sito web, è il momento di crearne uno!

<PreCheck>
  - Crea due nuove pagine sul tuo sito web: Su di me e Blog
  - Aggiungi link di navigazione alle tue pagine
  - Distribuisci una versione aggiornata del tuo sito web sul web
</PreCheck>

## Crea un nuovo file `.astro`

<Steps>
1. Nel pannello dei file del tuo editor di codice, naviga fino alla cartella `src/pages/` dove vedrai il file esistente `index.astro`

2. Nella stessa cartella, crea un nuovo file chiamato `about.astro`.

3. Copia o ridigita il contenuto di `index.astro` nel tuo nuovo file `about.astro`.

    :::tip
    Il tuo editor potrebbe mostrare un cerchio bianco pieno sull'etichetta della scheda per questo file. Questo significa che il file non è ancora stato salvato. Nel menu File in VS Code, abilita "Salvataggio automatico" e non dovresti più aver bisogno di salvare manualmente alcun file.
    :::

4. Aggiungi `/about` alla fine dell'URL di anteprima del tuo sito web nella barra degli indirizzi e verifica di poter vedere una pagina caricarsi lì. (es. `http://localhost:4321/about`)
</Steps>

In questo momento, la tua pagina "Su di me" dovrebbe apparire esattamente come la prima pagina, ma stiamo per cambiarlo!

## Modifica la tua pagina

Modifica il contenuto HTML per rendere questa pagina su di te.

Per cambiare o aggiungere più contenuto alla tua pagina Su di me, aggiungi più tag di elementi HTML contenenti contenuto. Puoi copiare e incollare il codice HTML qui sotto tra i tag `<body></body>` esistenti, o creare il tuo.

```astro title="src/pages/about.astro" ins={3-8} del={2}
<body>
  <h1>Il mio sito Astro</h1>
  <h1>Su di me</h1>
  <h2>... e il mio nuovo sito Astro!</h2>

  <p>Sto seguendo il tutorial introduttivo di Astro. Questa è la seconda pagina sul mio sito web, ed è la prima che ho costruito da solo!</p>

  <p>Questo sito si aggiornerà man mano che completerò altre parti del tutorial, quindi continua a controllare e vedi come sta andando il mio percorso!</p>
</body>
```

Ora, visita di nuovo la tua pagina `/about` nella scheda del tuo browser, e dovresti vedere il tuo contenuto aggiornato.

## Aggiungi link di navigazione

Per rendere più facile visualizzare in anteprima tutte le tue pagine, aggiungi link di navigazione di pagina HTML prima del tuo `<h1>` nella parte superiore di entrambe le tue pagine (`index.astro` e `about.astro`):

```astro title="src/pages/about.astro" ins={1-2}
<a href="/">Home</a>
<a href="/about/">Su di me</a>

<h1>Su di me</h1>
<h2>... e il mio nuovo sito Astro!</h2>
```

Verifica di poter cliccare su questi link per spostarti avanti e indietro tra le pagine sul tuo sito.

:::note
A differenza di molti framework, Astro utilizza elementi `<a>` HTML standard per navigare tra le pagine (chiamate anche _rotte_), con i tradizionali aggiornamenti di pagina.
:::

<Box icon="puzzle-piece">
## Prova tu stesso - Aggiungi una pagina Blog

Aggiungi una terza pagina `blog.astro` al tuo sito, seguendo [gli stessi passaggi di sopra](#crea-un-nuovo-file-astro).

(Non dimenticare di aggiungere un terzo link di navigazione a ogni pagina.)

<details>
<summary>Mostrami i passaggi.</summary>
<Steps>
1. Crea un nuovo file in `src/pages/blog.astro`.
2. Copia l'intero contenuto di `index.astro` e incollalo in `blog.astro`.
3. [Aggiungi un terzo link di navigazione](#aggiungi-link-di-navigazione) alla parte superiore di ogni pagina:
</Steps>

```astro title="src/pages/index.astro" ins={4}
<body>
  <a href="/">Home</a>
  <a href="/about/">Su di me</a>
  <a href="/blog/">Blog</a>

  <h1>Il mio sito Astro</h1>
</body>
```
</details>
</Box>

Ora dovresti avere un sito web con tre pagine che si collegano tutte tra loro. È il momento di aggiungere un po' di contenuto alla pagina Blog.

Aggiorna il contenuto della pagina in `blog.astro` con:
```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
<body>
  <a href="/">Home</a>
  <a href="/about/">Su di me</a>
  <a href="/blog/">Blog</a>

  <h1>Il mio sito Astro</h1>
  <h1>Il mio Blog di apprendimento di Astro</h1>
  <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
</body>
```

Visualizza in anteprima l'intero sito visitando tutte e tre le pagine nell'anteprima del tuo browser e verifica che:
- Ogni pagina si collega correttamente a tutte e tre le pagine
- Le tue due nuove pagine hanno ciascuna la propria intestazione descrittiva
- Le tue due nuove pagine hanno ciascuna il proprio testo di paragrafo

## Pubblica le tue modifiche sul web
Se hai seguito la nostra configurazione nell'Unità 1, puoi pubblicare le tue modifiche sul tuo sito web live tramite Netlify.

Quando sei soddisfatto di come appare la tua anteprima, **esegui il commit** delle tue modifiche al tuo repository online su GitHub.

<Steps>
1. In VS Code, visualizza in anteprima i file che sono cambiati dall'ultimo commit su GitHub.

    - Vai alla **scheda Controllo del codice sorgente** nel menu a sinistra. Dovrebbe avere un piccolo "3" visualizzato.

    - Dovresti vedere `index.astro`, `about.astro` e `blog.astro` elencati come file che sono cambiati.

2. Inserisci un messaggio di commit (es. "Aggiunte due nuove pagine - about e blog") nella casella di testo e premi <kbd>Ctrl + Enter</kbd> (macOS: <kbd>Cmd ⌘ + Enter</kbd>) per eseguire il commit della modifica al tuo workspace corrente.

3. Clicca sul pulsante per <kbd>Sincronizza modifiche</kbd> su GitHub.

4. Dopo aver atteso alcuni minuti, visita il tuo URL Netlify per verificare che le tue modifiche siano pubblicate live.
</Steps>

:::tip[Esegui commit e distribuisci regolarmente]
Segui questi passaggi ogni volta che interrompi il lavoro! Le tue modifiche verranno aggiornate nel tuo repository GitHub. Se hai distribuito su un sito web Netlify, verrà ricostruito e ripubblicato.
:::

<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Posso creare una nuova pagina per il mio sito web e collegarmi ad essa da una pagina esistente.
- [ ] Posso eseguire il commit delle mie modifiche su GitHub e aggiornare il mio sito live su Netlify.
</Checklist>
</Box>

### Risorse

- [Routing basato su file in Astro](/it/basics/astro-pages/#routing-basato-su-file)

- [HTML della pagina Astro](/it/basics/astro-pages/#pagine-astro)
